<template>
  <div class="home">
    <swiper />
    <div v-for="(item, index) in staffList" :key="index" class="section">
      <div class="section-title">{{ item.name }}</div>
      <content-list :content-list="item.list"></content-list>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ElLoading } from 'element-plus';
  import Swiper from '@/components/Swiper.vue';
  import ContentList from '@/components/ContentList.vue';
  import { getCurrentInstance, onMounted, reactive } from 'vue';
  // 获取全局挂载的对象
  const { globalProperties } = getCurrentInstance()?.appContext.config; // 获取全局挂载
  const Query = globalProperties.$Query;
  const querySheetFiles = async () => {
    const query = new Query('_File');
    const result = await query.find();
    const sheetFiles = await result.map((item: any) => {
      return {
        name: item.attributes.name,
        // gpUrl: item.attributes.url,
        id: item.id,
        srcUrl: new URL(`../assets/img/swiper/1.jpg`, import.meta.url).href,
      };
    });
    return sheetFiles;
  };

  const staffList = reactive([]);
  onMounted(async () => {
    // 开始显示loading框子
    const loadingInstance = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
    });
    querySheetFiles().then((res) => {
      staffList.push({
        name: '最新乐谱',
        list: res,
      });
      loadingInstance.close();
    });
  });

  // .then((res) => {
  //   staffList = reactive([
  //     {
  //       name: '最新乐谱',
  //       list: res,
  //     },
  //   ]);
  // });
</script>

<style lang="less" scoped>
  @import '@/assets/css/home.less';
</style>
